<template>
  <div class="page-container">
    <card title="订单信息">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="自营订单号">{{ orderDetails?.orderInfo.orderCode }}</a-descriptions-item>
            <a-descriptions-item label="渠道订单号">{{ orderDetails?.orderInfo.channelOrderCode }}</a-descriptions-item>
            <a-descriptions-item label="订单来源">{{ orderDetails?.orderInfo.orderSourceName }}</a-descriptions-item>
            <a-descriptions-item label="订单渠道">{{ orderDetails?.orderInfo.channelSiteName }}</a-descriptions-item>
            <a-descriptions-item label="预计租赁周期" v-if="orderDetails?.orderInfo.startTime && orderDetails?.orderInfo.endTime">
              {{ orderDetails?.orderInfo.startTime }}至{{ orderDetails?.orderInfo.endTime }}
            </a-descriptions-item>
            <a-descriptions-item label="租期">{{ orderDetails?.orderInfo.rentDays }}</a-descriptions-item>
            <a-descriptions-item label="账单门店">{{ orderDetails?.orderInfo.siteName }}</a-descriptions-item>
            <a-descriptions-item label="车型">{{ orderDetails?.orderInfo.carModelName }}</a-descriptions-item>
            <a-descriptions-item label="订单状态">{{ orderDetails?.orderInfo.orderStatusName }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="getOrderDetails" />

    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="getOrderDetails">
      <template #table-summary>
        <div class="table-info">
          <span class="table-info-item">
            费用合计：<span class="a-link">{{ unitVal(orderDetails?.allPay, '元') }}</span>
          </span>
          <span class="table-info-item">
            应收：
            <span class="a-link">{{ unitVal(orderDetails?.receiveAmount, '元') }} </span>
          </span>
          <span class="table-info-item">
            实收： <span class="a-link">{{ unitVal(orderDetails?.payAmount, '元') }} </span>
          </span>
          <span class="table-info-item">
            应付： <span class="a-link">{{ unitVal(orderDetails?.receiveFeeAmount, '元') }} </span>
          </span>
          <span class="table-info-item">
            实付： <span class="a-link">{{ unitVal(orderDetails?.feeAmount, '元') }} </span>
          </span>
        </div>
      </template>
      <template #expand-icon="{ expanded }">
        <icon-plus-circle class="icon-custom" v-if="!expanded" />
        <icon-minus-circle class="icon-custom" v-else />
      </template>
      <template #selectkey>
        <div></div>
      </template>
      <template #feeRecordList="{ record }">
        <div v-for="item in record.feeRecordList" :key="item.recordCode">
          {{ item.recordCode }}
        </div>
      </template>
      <template #confirmUserName="{ record }">
        <div>{{ record.confirmUserName }}</div>
        <div>{{ record.confirmTime }}</div>
      </template>
      <template #recordConfirmName="{ record }">
        <div>{{ record.recordConfirmUserName }}</div>
        <div>{{ record.recordConfirmTime }}</div>
      </template>
    </table-index>
  </div>
</template>
<script setup lang="ts" name="ShortOrderBillDetail">
  import { getBillDetail } from '@/api/finance/bill'
  import { ref, onMounted, reactive, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { useTable } from '@/hooks/table'
  import { unitVal } from '@/utils'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('costConfirmDict')
  const route = useRoute()
  const orderDetails = ref<any>()
  const pageId = ref()
  const queryParam = reactive({})
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '费用类型', prop: 'feeType', type: 'a-select', options: dict.orderFeeTypeEnum },
      { label: '收支类型', prop: 'costType', type: 'a-select', options: dict.costTypeEnum },
      { label: '费用状态', prop: 'feeStatus', type: 'a-select', options: dict.orderFeeStatusEnum },
    ]
  })
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: ' ', slotName: 'selectkey', width: 55, fixed: 'left' },
      { title: '费用名称', dataIndex: 'feeName', fixed: 'left', width: 180 },
      { title: '费用类型', dataIndex: 'feeTypeName' },
      { title: '收支类型', dataIndex: 'costTypeName' },
      { title: '费用金额', dataIndex: 'totalAmount', unit: '元' },
      { title: '实结金额', dataIndex: 'payAmount', unit: '元' },
      { title: '待结金额', dataIndex: 'waitPayAmount', unit: '元' },
      { title: '生成节点', dataIndex: 'createNodeName' },
      { title: '生成时间', dataIndex: 'createTime', width: 180 },
      { title: '收支方式', dataIndex: 'payTypeName' },
      { title: '收支账号', dataIndex: 'payAccount' },
      { title: '费用状态', dataIndex: 'feeStatusName' },
      { title: '收付款时间', dataIndex: 'payTime', width: 180 },
      { title: '确认时间', dataIndex: 'confirmTime', width: 180 },
      { title: '确认人', dataIndex: 'confirmUserName' },
      { title: '费用备注', dataIndex: 'remark', ellipsis: true },
      { title: '费用确认信息', dataIndex: 'confirmUserName', slotName: 'confirmUserName', width: 180 },
      { title: '流水号', dataIndex: 'feeRecordList', slotName: 'feeRecordList', width: 230 },
      { title: '流水状态', dataIndex: 'recordStatusName' },
      { title: '流水确认信息', dataIndex: 'recordConfirmName', slotName: 'recordConfirmName', width: 180, fixed: 'right' },
    ],
  })

  const tabletolist = (list: any) => {
    list.forEach((el: any) => {
      el.mtype = 'MENU'
      el.level = 1
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children.forEach((pl: any) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM'
          pl.expand = null
          if (pl.type == 0) {
            pl.feeName = pl.feeCategoryName
            pl.totalAmount = pl.amount
          }
          if (pl.type == 1 || pl.type == 4) {
            pl.feeName = pl.itemName
            pl.totalAmount = pl.amount
          }
          if (pl.childrenList && pl.childrenList.length) {
            pl.children = pl.childrenList
            pl.children.forEach((ol: any) => {
              ol.id = ol.id + 60000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
              ol.mtype = 'TERM'
              ol.expand = null
              ol.feeName = ol.itemName
              ol.costTypeName = ol.costTypeName
              ol.totalAmount = ol.amount
              // ol.children = null
            })
          } else {
            return false
          }
        })
      } else {
        return false
      }
    })
    return list
  }

  // 获取订单详情
  const getOrderDetails = async () => {
    tableCompulsory.tableLoading = true
    const { result } = await getBillDetail({ id: pageId.value })

    const dataOne = []
    if (result.orderFeeList && result.orderFeeList.length) {
      result.orderFeeList.forEach((i) => {
        if (
          (queryParam.feeType == undefined || queryParam.feeType === i.feeType) &&
          (queryParam.costType == undefined || queryParam.costType === i.costType) &&
          (queryParam.feeStatus == undefined || queryParam.feeStatus === i.feeStatus)
        ) {
          dataOne.push(i)
        }
      })
    }
    const orderFeeList = dataOne

    var dataTwo = []
    if (result.violationFeeList && result.violationFeeList.length) {
      result.violationFeeList.forEach((i) => {
        if (
          (queryParam.feeType == undefined || queryParam.feeType === i.feeType) &&
          (queryParam.costType == undefined || queryParam.costType === i.costType) &&
          (queryParam.feeStatus == undefined || queryParam.feeStatus === i.feeStatus)
        ) {
          dataTwo.push(i)
        }
      })
    }
    const violationFeeList = dataTwo

    violationFeeList.forEach((item: any) => {
      item.waitPayAmount = item.outstandingAmount
    })
    const data = tabletolist([...orderFeeList, ...violationFeeList])
    console.log('data', data)

    // data.forEach((item: any) => {
    //   item.information = item.confirmUserName && item.confirmTime ? `${item.confirmUserName} <br />${item.confirmTime}` : ''
    // })
    orderDetails.value = result
    tableCompulsory.dataList = data
    tableCompulsory.tableLoading = false
  }

  onMounted(() => {
    pageId.value = route.params.id
    if (pageId.value) {
      getOrderDetails()
    }
  })
</script>
<style scoped lang="less">
  :deep(.arco-table .arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  .icon-custom {
    color: #0256ff;
    font-size: 20px;
  }

  .table-info {
    display: flex;
    align-items: center;
    .table-info-item {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .a-link {
        color: #1890ff;
      }
    }
  }
</style>
